<template>
  <div class="list-wrapper">
    <div class="top-bar">
      <div class="logo">技术文件签名</div>
      <input type="text" placeholder="搜索流程" v-model="processName">
      <i class="el-icon-close close" @click="processName = '';"></i>
      <i class="el-icon-search search" @click="getData"></i>
      <div class="btn-wrapper">
        <div v-if="canCreate">
          <el-dropdown placement="bottom" @command="createFile" :show-timeout="0">
            <span class="el-dropdown-link">
              <i class="el-icon-plus"></i>
              新建
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">签章申请</el-dropdown-item>
              <el-dropdown-item command="2">文件签发</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-if="isManager">
          <span @click="toTarget('setting')">
            <i class="el-icon-setting"></i>
            设置
          </span>
        </div>
        <div>
          <span @click="toTarget('history')">
            <i class="el-icon-tickets"></i>
            记录
          </span>
        </div>
        <div>
          <span @click="toHelp">
            <i class="el-icon-reading"></i>
            帮助
          </span>
        </div>
      </div>
    </div>
    <div class="type-bar">
      <div :class="{'active': currentStatus === ''}" @click="changeStatus('')">全部</div>
      <div :class="{'active': currentStatus === 1}" @click="changeStatus(1)">进行中</div>
      <div :class="{'active': currentStatus === -10}" @click="changeStatus(-10)">已终止</div>
      <div :class="{'active': currentStatus === 10}" @click="changeStatus(10)">已完结</div>
    </div>
    <div class="top-filter" style="padding-left: 32px;margin-top: 24px;">
      <el-dropdown :show-timeout="0" @command="selectFilter">
        <el-button type="primary">
          {{currentName}}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">全部</el-dropdown-item>
          <el-dropdown-item command="2">签章申请</el-dropdown-item>
          <el-dropdown-item command="3">文件签发</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="data-wrapper" ref="scrollcontainer">
      <ex-infinite-scroll ref="ins" class="clearfix" url="audit/process/list" :size="15">
        <template slot="content" slot-scope="{list}">
          <div class="data-item-wrapper" v-for="item in list" :key="item.id">
          <div class="data-item" @click="toTarget('detail', item.id)" :class="{'grap': item.status === -10}">
              <img v-if="item.status === -10" src="../../../assets/img/yzz.png" alt="">
              <div class="left">
                <img v-if="item.modelId === '1'" src="../../../assets/img/signIcon1.png">
                <img v-if="item.modelId === '2'" src="../../../assets/img/signIcon2.png">
              </div>
              <div class="right">
                <p class="title clearfix">
                  {{item.name}}
                  <img src="../../../assets/img/stop.png" alt="" style="position:absolute;right:0;top:4px;color:#AEAEB0;width: 16px;height: 16px;" @click.stop="stopItem(item.id)" v-if="item.status === 1 && (isManager || item.initiator === userInfo.dingId)">
                  <i style="position:absolute;right:0;top:4px;color:#AEAEB0;" @click.stop="delItem(item.id)" v-if="item.status === -10 && isManager" class="el-icon-delete"></i>
                </p>
                <p class="owner">负责人:{{item.initiatorName}}</p>
                <div class="progress">
                  <el-progress v-if="item.modelId === '1'" :percentage="item.status === 10? 100: item.step * 16" :color="customColorMethod" :show-text="false"></el-progress>
                  <el-progress v-if="item.modelId === '2'" :percentage="item.status === 10 ? 100: item.step * 16" :color="customColorMethod" :show-text="false"></el-progress>
                </div>
                <div v-if="item.modelId === '1'" class="bottom clearfix"><span class="status-name" :style="{'color': item.status !== 10? '#E6A23C': '#409EFF'}">{{item.status === 10? '申请完结': item.stepMean}}</span><span class="status-handler">{{item.teamLeaderName}}</span></div>
                <div v-if="item.modelId === '2'" class="bottom clearfix"><span class="status-name" :style="{'color': item.status === 10? '#409EFF': '#E3AA00'}">{{item.status === 10? '发布完结': item.stepMean}}</span><span class="status-handler">{{item.teamLeaderName}}</span></div>
              </div>
            </div>
          </div>
        </template>
        <template slot="footer" slot-scope="{noMore}">
          <div class="footer">
            {{noMore ? '没有更多信息了': '加载更多信息'}}
          </div>
        </template>
      </ex-infinite-scroll>
    </div>
  </div>
</template>

<script>
import ExInfiniteScroll from '@/components/common/ex-infinite-scroll'
import formUtil from "@/utils/formUtil";
import dingMixin from  '@/mixins/ding'

export default {
  data() {
    return {
      currentName: '筛选',
      tableData: [],
      currentStatus: '',
      processName: '',
      currentScrollTop: 0,
      showFilter:false,
      filterData: {
        modelId: '',
        taskStatus: ''
      },
      filterPeople:{
        assigneeId: '',
        assigneeName: '',
      },
      taskStatusArr: [
        {
          name: '待审核',
          id: '0'
        },{
          name: '通过',
          id: '1'
        },{
          name: '拒绝',
          id: '2'
        },{
          name: '终止',
          id: '-10'
        }
      ],
      fileTypeArr: [
        {
          name: '签章申请',
          id: '1'
        },{
          name: '文件签发',
          id: '2'
        }
      ]
    }
  },
  components:{
    ExInfiniteScroll
  },
  mixins: [dingMixin],
  beforeRouteLeave(to,from,next) {
    this.currentScrollTop = this.$refs.scrollcontainer.scrollTop;
    next()
  },
  activated() {
    if(window.NEEDREFRESH) {
      this.getData()
      window.NEEDREFRESH = false;
    }else {
      this.$refs.scrollcontainer.scrollTop = this.currentScrollTop;
    }
  },
  async mounted() {
    this.getData();
    if(this.$route.params.id) this.toTarget('detail', this.$route.params.id)
  },
  computed:{
    isManager() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1302813747899891713')
    },
    canCreate() {
      return this.userInfo.roleIdList && (this.userInfo.roleIdList.includes('1302813747899891713') || this.userInfo.roleIdList.includes('1302813937092362242') || this.userInfo.roleIdList.includes('1302848230384566273'))
    },
  },
  methods: {
    selectFilter(type) {
      if(type === '1') {
        this.filterData.modelId = '';
        this.currentName = '全部'
      }else if(type === '2'){
        this.filterData.modelId = '1';
        this.currentName = '签章申请'
      }else if(type === '3'){
        this.filterData.modelId = '2';
        this.currentName = '文件签发'
      }
      this.getData();
    },
    selectDingUsers(target) {
      this.complexPicker(1, [], []).then(
        data => {
          target.assigneeId = data[0].emplId;
          target.assigneeName = data[0].name;
        }
      );
    },
    delMember(target) {
      target.assigneeId = '';
      target.assigneeName = '';
    },
    createFile(command) {
      this.$router.push({ name: 'sign-create', params: {type: command}})
    },
    resetFilter() {
      this.filterData = {
        modelId: '',
        taskStatus: ''
      };
      formUtil.resetData(this.filterPeople);
    },
    customColorMethod(percentage) {
      if (percentage === 16) {
        return '#E3AA00'
      }else if(percentage === 32) {
        return '#E3AA00'
      }else if(percentage === 48) {
        return '#E3AA00'
      }else if(percentage === 64) {
        return '#E3AA00'
      }else if(percentage === 80) {
        return '#E3AA00'
      }else if(percentage === 100) {
        return '#409EFF'
      }
    },
    getData() {
      this.$refs.ins.getData({
        Status: this.currentStatus, 
        processName: this.processName,
        operator: this.filterPeople.assigneeId,
        modelId: this.filterData.modelId,
        taskStatus: this.filterData.taskStatus
      })
      this.$refs.scrollcontainer.scrollTop = 0;
    },
    toTarget(url, id) {
      this.$router.push({ name: 'sign-' + url, params: {id: id}})
    },
    toHelp() {
      this.$router.push({ name:  'help', params: {articleId: '1334328155343740929'}})
    },
    changeStatus(type) {
      this.currentStatus = type;
      this.getData();
    },
    stopItem(id) {
      formUtil.submitConfirm('您确定要终止该文件吗？', async ()=> {
        if(!await this.$httpN.postQ('audit/process/cancel', {processId: id}, false)) return;
        formUtil.submitSuccess('终止成功');
        this.getData();
      })
    },
    delItem(id) {
      formUtil.submitConfirm('您确定要删除该文件吗？', async ()=> {
        if(!await this.$httpN.postQ('audit/process/delete', {processId: id}, false)) return;
        formUtil.submitSuccess('删除成功');
        this.getData();
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .list-wrapper{
    background: #F5F5F7; 
    min-height: 100vh;
  }
  .top-bar{
    height: 64px;
    background: #00A0E9;
    position: relative;
    padding-top: 14px;
    .logo{
      font-size: 16px;
      color: #FFF;
      position: absolute;
      line-height: 64px;
      top: 0;
      left: 32px;
      font-weight:bold;
    }
    input{
      width: 457px;
      display: block;
      height: 36px;
      line-height: 36px;
      border: none;
      outline: none;
      background: rgba(255, 255, 255, 0.24);
      border-radius: 18px;
      margin: 0 auto;
      padding-left: 16px;
      color: #FFF;
      font-size: 14px;
    }
    input::-webkit-input-placeholder{
      color: #C5E9F9;
    }

    input:-moz-placeholder{
      color: #C5E9F9;
    }

    input::-moz-placeholder{
      color: #C5E9F9;
    }

    input:-ms-input-placeholder{
      color: #C5E9F9;
    }
    .close, .search{
      position: absolute;
      font-size: 24px;
      color: #FFF;
      top: 20px;
      cursor: pointer;
    }
    .close{
      left: 50%;
      margin-left:150px;
    }
    .search{
      left: 50%;
      font-size: 20px;
      top: 22px;
      margin-left:180px;
    }
    .btn-wrapper{
      position: absolute;
      right: 0;
      top: 0;
      line-height: 64px;
      color: #FFF;
      display:flex;
      font-size: 16px;
      >div{
        width: 81px;
        flex: 1;
        span{
          cursor: pointer;
        }
      }
      .el-dropdown-link{
        color: #FFF;
      font-size: 16px;
      }
    }
  }
  .type-bar{
    display:flex;
    background: #FFF;
    position: relative;
    z-index: 3;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
    >div{
      flex:1;
      font-size: 18px;
      color: #AEAEB0;
      line-height: 80px;
      text-align: center;
      position: relative;
      cursor: pointer;
      &.active{
        color: #1890FF;
      }
      &::after{
        content: '';
        display: block;
        position: absolute;
        right:0;
        top: 29px;
        width: 2px;
        height: 22px;
        background: #DDDDDE;
      }
    }
    >div:last-child {
      &::after{
        content: none;
      }
    }
  }
  .data-wrapper{
    padding: 16px;
    height: calc(100vh - 220px);
    padding-top: 0;
    margin-top: 8px;
    overflow: auto;
    .data-item-wrapper{
      float:left;
      padding: 16px;
      width: 33.3%;
      .data-item{
        position: relative;
        >img{
          position: absolute;
          right: 40px;
          top: 5px;
          height: 80px;
          z-index: 3;
        }
        &.grap{
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          filter: grayscale(100%);
          filter: gray;
          filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        }
        box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        height: 156px;
        padding: 20px 16px;
        display: flex;
        background: white;
        border-radius: 8px;
        .left{
          width: 116px;
          height: 116px;
          display: flex;
          flex-direction:  column;
          justify-content: center;
          img{
            max-height: 100%;
            max-width: 100%;
          }
        }
        .right{
          width: calc(100% - 116px);
          flex: 1;
          padding-left: 12px;
          position: relative;
          .title{
            color: #303334;
            font-size: 16px;
            font-weight: 500;
            margin: 0;
            line-height: 25px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            padding-right:30px;
            width: 100%;
          }
          .owner{
            font-size: 14px;
            font-weight: 400;
            color: #AEAEB0;
            line-height: 20px;
            margin: 0;
            margin-top:5px;
          }
          .progress{
            margin-top: 19px;
          }
          .bottom{
            margin-top: 12px;
            .status-name{
              float:left;
              color: #EBB000;
              font-size: 14px;
              line-height: 20px;
            }
            .status-handler{
              float:right;
              color: rgba(0, 0, 0, 0.45);
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }
    }
    .footer{
      clear:both;
      text-align: center;
      color: #BCBCBC;
      font-size: 16px;
    }
  }
  .slide-filter{
    .mask{
      position: fixed;
      height: 100vh;
      width: 100%;
      top: 0;
      right: 0;
      z-index: 3;
    }
    .filter-wrapper{
      position: absolute;
      width: 315px;
      padding-bottom: 20px;
      background: white;
      top: 58px;
      right: 20px;
      z-index: 99;
      border-radius: 5px;
      box-shadow: 0 0 3px black;
      .filter-header{
        line-height: 40px;
        padding-left: 16px;
        border-bottom: 1px solid #DDD;
        margin-bottom: 20px;
      }
      .filter-arrow{
        width:12px;
        height:12px;
        position: absolute;
        top: -7px;
        right: 20px;
        box-shadow: 0 0 3px black;
        transform: rotate(45deg);
        background: #FFF;
      }
      .filter-white{
        width:18px;
        height:18px;
        position: absolute;
        top: -2px;
        right: 17px;
        border-radius: 3px;
        background: white;
      }
      .select-btn{
        display: inline-block;
        font-weight: normal;
        margin-right: 5px;
        width: 80px;
        height: 28px;
        border-radius: 30px;
        background: #FAFAFA;
        border: 1px solid #ECECEC;
        position: relative;
        line-height: 28px;
        color: #7982A7;
        font-size: 12px;
        text-align: center;
        position: relative;
        cursor: pointer;
        .del{
          position: absolute;
          top:0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 30px;
          color: white;
          text-align: center;
          background:rgba(130, 130, 130, 0.9);
          display: none;
        }
        &:hover{
          .del{
            display: block;
          }
        }
      }
    }
  }
  @media screen and (max-width: 1200px) {
    .data-wrapper .data-item-wrapper{
      width: 50%;
    }
  }
</style>